<!DOCTYPE html>
<html>
<head>
    <title>K线图</title>
    <link href="/src/css/main.css" rel="stylesheet"/>
    <script src="../lib/require.js"></script>
    <style type="text/css">
        .kline {
            width: 1200px;
            margin-left: auto;
            margin-right: auto;
            height: 462px;
            position: fixed;
        }
        .kline .trade_container{display: none;width:0;}
        .kline .chart_container.dark #chart_toolbar{
                background-color: #21232e;
                border-bottom-color: #404040;
        }
        .kline .chart_container.dark #chart_toolpanel{
                background-color: #282a36;

        }
        .kline .chart_container.dark #chart_tabbar{
                background-color: #21232e;

        }
        #chart_show_indicator,#chart_updated_time,#chart_toolbar_theme,#chart_dropdown_settings,#chart_language_setting_div,#chart_period_1h_h,#chart_toolbar_periods_vert{display: none;}
        .kline .chart_container.dark .chart_toolbar_button{
                font-size: 12px;
                /*padding: 0 5px;*/
                border: #0a667e 1px solid;
                color: #0a667e;
        }
        .kline .chart_container.dark .chart_toolbar_button:hover,.kline .chart_container.dark .chart_toolbar_button.selected:hover {
            background-color: #383838;
            border-color: #0a667e;
            color: #2db4dc;
        }
        .kline .chart_container.dark .chart_toolbar_button.selected{
             background-color: #383838;
            border-color: #0a667e;
            color: #2db4dc;
        }
        .kline .chart_container .chart_toolbar_tabgroup{
            display: flex;
            flex-direction: row-reverse;
        }
        .kline .chart_container.dark .chart_toolbar_tabgroup li a{
                color: #AFB4B8;
        }
        .kline  .chart_container.dark .chart_toolbar_tabgroup li a.selected{
                background-color: #2db4dc;
                color: #043947;
        }
    </style>
</head>
<body>

<div class="kline">
    <div id="kline_container"></div>
</div>


<script type="text/javascript">
    // 获取窗口宽度
    if (window.innerWidth)
    winWidth = window.innerWidth+250;
    else if ((document.body) && (document.body.clientWidth))
    winWidth = document.body.clientWidth+250;
console.log(winWidth)
window.onresize = function(){
    console.log(window.innerWidth)
        if (window.innerWidth)
    winWidth = window.innerWidth+250;
    else if ((document.body) && (document.body.clientWidth))
    winWidth = document.body.clientWidth+250;
     require(['kline'], function () {
        var kline = new Kline({
            width: winWidth,

        })
    })
}
    require.config({
        paths: {
            "jquery": "../lib/jquery",
            "jquery.mousewheel": "../lib/jquery.mousewheel",
            "sockjs": "../lib/sockjs",
            "stomp": "../lib/stomp",
            "kline": "../lib/kline"
        },
        shim: {
            "jquery.mousewheel": {
                deps: ["jquery"]
            },
            "kline": {
                deps: ["jquery.mousewheel", "sockjs", "stomp"]
            }
        }
    });

    require(['kline'], function () {
        var kline = new Kline({
            element: "#kline_container",
            width: winWidth,
            // height: 650,
            theme: 'dark', // light/dark
            language: 'zh-cn', // zh-cn/en-us/zh-tw
            ranges: ["1w", "1d", "1h", "30m", "15m", "5m", "1m", "line"],
            symbol: "BTC",
            symbolName: "BTC/USD",
            type: "poll", // poll/socket
            url: "/lib/mock.json",
            // url: "http://192.168.80.228:7300/ws-waleychain",
            // subscribePath: "/exchange/C973FF2D1C4B7048E940BEEC73C84926/kline",
            limit: 1000,
            intervalTime: 5000,
            debug: true,
            showTrade: true
        });

        kline.draw();
    });
</script>

</body>
</html>
